<template>
  <view class="tab-main">
    <view
      class="tabs"
      :class="{ spaceCenter: tabList.length === 1 }"
    >
      <view
        class="tab-item"
        :class="{ active: currentIndex === index }"
        v-for="(item, index) in tabList"
        :key="index"
        @click.stop="handleTab(item, index)"
      >
        <image
          class="img"
          :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
        ></image>
        <view class="text">{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    modifyType: {
      type: String,
      default: "",
    },
  },
  computed: {
    tabList() {
      return this.tabs.filter((item) => item.show);
    },
  },
  data() {
    return {
      currentIndex: 0,
	  tabs: [
		  {
		  label: "首页",
		  type: "index",
		  url: "/pages/index/index",
		  iconPath: "/static/tab/index.png",
		  selectedIconPath: "/static/tab/index_avtive.png",
		  show: true,
		},
		{
		  label: "已购",
		  type: "learning",
		  url: "/pages/learning/index",
		  iconPath: "/static/tab/learning.png",
		  selectedIconPath: "/static/tab/learning_active.png",
		  show: true,
		},
		{
		  label: "我的",
		  type: "my",
		  url: "/pages/my/index",
		  iconPath: "/static/tab/my.png",
		  selectedIconPath: "/static/tab/my_active.png",
		  text: "我的",
		  show: true,
		},
	  ]
    };
  },
  methods: {
    handleTab(item, index) {
      if (this.currentIndex === index) {
        return;
      }
      uni.switchTab({
        url: item.url,
      });
    },
  },
  mounted() {
    if (this.modifyType.length) {
      this.currentIndex = this.tabList.findIndex(
        (item) => item.type === this.modifyType
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.tab-main {
  position: fixed;
  z-index: 9999;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #ffffff;
  box-shadow: 0rpx -1rpx 0rpx 0rpx #ebedf0;
  .tabs {
    display: flex;
    justify-content: space-between;
    padding: 0 50rpx;
    height: 120rpx;
    .tab-item {
      padding: 16rpx 50rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      .img {
        width: 50rpx;
        height: 50rpx;
      }
      .text {
        margin-top: 12rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #cacdd8;
        line-height: 24rpx;
      }
    }
    .tab-item.active {
      .text {
        color: #5475ff;
      }
    }
  }
  .spaceCenter {
    justify-content: center;
  }
}
</style>